<template>
  <div>
    <el-card class="collection-head-card">
      <div slot="header">
        <span>我的搜藏</span>
      </div>
      <el-empty v-if="!this.articleList" description="空空如也！" style="height: 615px;"></el-empty>
    </el-card>
    <collection-display></collection-display>
  </div>
</template>

<script>
import collectionDisplay from './collectionDisplay'
import { mapActions, mapGetters, mapMutations, mapState } from 'vuex'
import axios from 'axios'

export default {
  data () {
    return {
      articleList: []
    }
  },
  created () {
    this.clearArticleList()
    this.loadMycollection()
  },
  // DOM对象加载完成时
  mounted () {
  },
  methods: {
    ...mapMutations('HomePage', {
      setArticleActionList: 'setArticleActionList',
      InitArticleList: 'InitArticleList',
      clearArticleList: 'clearArticleList'
    }),
    // 加载我的收藏数据
    async loadMycollection () {
      const url = this.$config.urls.get('load_user_collection')
      const { data: res } = await this.$http.post(url)
      if (res.code !== 0) {
        this.$message.error('用户未登录！')
        console.log(res)
      } else {
        console.log(res.data)
        this.InitArticleList(res.data)
      }
    }
  },
  computed: {
    ...mapGetters('HomePage', { articleActionList: 'articleActionList', articleList: 'articleList' })
  },
  components: { collectionDisplay },
  name: 'userArticle'
}
</script>

<style lang="less" scoped>
.collection-head-card{
  /deep/.el-card__header{
    border-bottom: none;
  }
  /deep/.el-card__body{
    padding:0;
  }
}
</style>
